import { Row, Col, Dropdown, Button, Avatar } from "antd";
import React from "react";
import { UserProfile } from "../../../serve/interface";

interface HeaderProps {
    profile?: UserProfile;
}
export const Header = (props: HeaderProps) => {
    const { profile } = props;
    return (
        <div className="h-14 border border-t-0 border-solid border-gray-100">
            <Row className="container mx-auto">
                <Col span={16} className="text-xl p-3">
                    <a href="/" className="no-underline text-blue-500">{document.title}</a>
                </Col>
                <Col span={8} className="text-right p-3">
                    <Dropdown menu={{
                        items: [
                            {
                                key: "1",
                                label: "个人中心",
                                onClick: () => {
                                    window.open("/admin");
                                }
                            },
                            {
                                key: "2",
                                label: "退出登录",
                                onClick: () => {
                                    window.location.href = "/logout";
                                }
                            },
                        ]
                    }}>
                        <Button type="link" icon={<Avatar className="bg-blue-600" icon={profile?.nickname?.charAt(0)} />}>
                            {profile?.nickname}
                        </Button>
                    </Dropdown>
                </Col>
            </Row>
        </div>
    )
}